<template>
    <div>
        <el-dialog title="获取经纬度" :visible.sync="open" width="540px" append-to-body>
            <div class="map" id="mapLocation" style="width: 500px; height: 400px"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitLocation">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import MapTool from "@/plugins/esri/mapTool.js";
import dialogMixin from "@/mixins/dialogMixin";
import mapUtils from "@/plugins/esri/mapUtils";

export default {
    mixins: [dialogMixin],
    data() {
        return {
            zoom: 14,
            keyword: "",
            marker: null,
            pickedPoint: null,
        };
    },
    mounted() {},
    methods: {
        showDialog() {
            this.open = true;
            this.$nextTick(() => {
                if (this.map == null) {
                    this.getMap();
                }
            });
        },
        getMap() {
            this.mapTool = new MapTool();
            this.mapTool.initMapView("mapLocation", { zoom: 1 }).then(res => {
                this.mapView = res;
                this.mapView.when(() => {
                    // 地图点击事件
                    this.mapView.on("click", e => {
                        this.mapTool.clearAllMarker();
                        console.log(e.mapPoint, "选择的地图标记");
                        // 转化成经纬度
                        mapUtils.transformCoordinate(e.mapPoint, 4326).then(res => {
                            let point = [res.latitude, res.longitude];
                            // 打个标记在地图上
                            mapUtils.buildMarker({ center: point, attributes: {} }).then(marker => {
                                this.mapTool.addMarker(marker);
                                this.pickedPoint = point;
                            });
                        });
                    });
                });
            });
        },
        submitLocation() {
            this.$emit("onPicked", this.pickedPoint); // 将选择结果传递出去
            this.close();
        },
    },
};
</script>

<style scoped>
.location-search {
    display: flex;
    margin-bottom: 20px;
}

.location-search input {
    flex: 1;
}

.location-search button {
    width: 80px;
    margin-left: 20px;
}
</style>
